<template>
    <div>
        <el-select v-model="value" @change='handleChange' style="margin-bottom: 10px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <div class="custom" v-show="value == 'custom'">
            <el-input-number v-model="startSecond" :min="0" :controls="false" @change="intervalChange"></el-input-number>秒
            <span style="margin:0 5px">至</span>
            <el-input-number v-model="endSecond" :min="0" :controls="false" @change="intervalChange"></el-input-number>秒
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                options: [{
                    value: 'interval',
                    label: '不限'
                }, {
                    value: 'custom',
                    label: '自定义'
                }],
                startSecond :undefined,
                endSecond :undefined,
                value: 'interval'
            }
        },
        methods: {
            intervalChange(){
                this.$emit('getInterval',{
                    startSecond:this.startSecond,
                    endSecond:this.endSecond
                })
            },
            handleChange(val) {
                this.num1 = undefined
                this.num2 = undefined
                switch (val) {
                    case 'interval':
                       
                        break;
                    case 'custom':
                       
                        break;
                }
                // this.$emit('getInterval', payload)
                this.$emit('changeCollapse', val == 'custom')
            }
        }
    }
</script>

<style lang="less" scoped>
    .custom{
        display: flex;
        flex-wrap: nowrap;
        color: #606266;
        justify-content: space-between;
        .el-input-number--mini{
            width: auto;
            margin-right: 3px;
        }
    }
</style>